<template>
  <footer>
    <span>Copyright</span>
    <span class="icon">©</span>
    <span>{{ copyright.dates }}</span>

    <template v-if="copyright.company">
      <a v-if="copyright.website" :href="copyright.website" target="_blank" rel="noopener">
        {{ copyright.company }}
      </a>
      <span v-else>{{ copyright.company }}</span>
    </template>

    <a v-if="copyright.beian" href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">
      {{ copyright.beian }}
    </a>
    <!-- <a href="#">新增展示内容</a> -->
  </footer>
</template>

<script setup lang="ts">
defineOptions({
  name: 'Copyright'
})

const copyright = reactive({
  dates: '2023',
  company: '碧云链',
  website: 'baidu.com',
  beian: '123'
})
</script>

<style scoped lang="less">
footer {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 0 20px;
  // color: var(--el-text-color-secondary);
  font-size: 14px;

  span,
  a {
    padding: 0 5px;
  }

  a {
    text-decoration: none;
    // color: var(--el-text-color-secondary);
    // transition: var(--el-transition-color);

    &:hover {
      // color: var(--el-text-color-primary);
    }
  }

  .icon {
    padding: 0;
    font-size: 18px;
  }
}
</style>
